<template>
  <toSearch></toSearch>
  <div class="adv">
    <img class="adv-img" :src="ImgUtil.getImg('1.png')" alt="" />
  </div>
  <div class="bookctgys">
    <!-- 面包屑 -->
    <breadcrumbs></breadcrumbs>
    <!-- 3级分类列表 -->
    <thirdCtgy></thirdCtgy>
    <!-- 排序列表 -->
    <booksort></booksort>
    <!-- 图书列表 -->
    <bookitem></bookitem>
  </div>
  <div>
    <!-- 购物车 -->
    <shopcart></shopcart>
  </div>
</template>

<script setup lang="ts">
import ImgUtil from "@/utils/imgutil"
import toSearch from "./components/toSearch.vue"
import breadcrumbs from './components/breadcrumbs.vue'
import thirdCtgy from './components/thirdctgys.vue'
import booksort from './components/booksort.vue'
import bookitem from "./components/bookitem.vue"
import shopcart from './components/shopcart.vue'
</script>

<style lang="scss" scoped>
.adv {
  position: absolute;
  top: .86rem;
  margin: .18rem;
  width: 5.04rem;
  height: 1.68rem;
  &-img {
    width: 100%;
    height: 100%;
    border-radius: .1rem;
  }
}
.bookctgys {
  position: absolute;
  top: 2.7rem;
  width: 5.04rem;
  margin: 0.18rem;
}
</style>
